<template>
	<view class="con">
		<view class="body">
			<!-- 选择地址 -->
			<view class="d_box boxshadow">
				<view class="flex" v-if="address == '' || address == null " @click="onshowAddress()">
					<view class="l c3">
						<!-- <text>暂未获取到收货地址</text> -->
						<text class="bold">请新建收货地址</text>

					</view>
					<view class="r">
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view>
				<view class="" v-else @click="onshowAddress(address.id)">
					<view class="title">
						<text class="c3 bold">
							收货地址
						</text>
					</view>
					<view class="info">
						<view class="info_left">

							<view class="i_bottom flex">
								<view class="ib-r bold">
									{{address.address+address.extra_field1}}
								</view>
							</view>
							<view class="i_top flex">
								<view class="it_l">
									<text class="name">{{address.recipient}}</text>
									<text class="tel">{{address.phone_number}}</text>
								</view>

							</view>
						</view>
						<view class="info_right">
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>

					</view>
				</view>
				<view class="yunfei diFlex">
					<view>配送方式</view>
					<view>快递 免运费</view>
				</view>
			</view>
			<!-- 订单详情 -->
			<view class="f_box boxshadow">
				<view class="ul">
					<serve-add :isOrder="isOrder" v-for="item in orderGoods" :goodsItem="item"></serve-add>
				</view>
				<!-- <view class="ul_row">
					
				</view> -->
			</view>
			<view class="qrOrder">
				<view class="qrOrderli diFlex">
					<view>
						<text class="hsf14">商品总价</text>
						<text class="hsf12 le5">共计{{orderData.total_num || ''}}件商品</text>
					</view>
					<view class="hsf14 bold">￥ {{orderData.goods_total_amount || ''}}</view>
				</view>
				<view class="qrOrderli diFlex" v-if="memberLevel != 0">
					<view>
						<text class="hsf14">会员优惠</text>
					</view>
					<view class="diFlex">
						<view class="hyleft">
							<text class="hsf14 red">{{orderData.member_level}}</text>
							<text class="hsf12">部分商品会员价，订单包邮</text>
						</view>
						<view class="hyRight le5">
							<image class="imgw" src="https://img-cdn.duobashuzi.com/xianggui/img/select-cart.png"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
				<!-- <view class="qrOrderli diFlex" @click="onYhui">
					<view>
						<text class="hsf14">优惠券</text>
					</view>
					<view class="diFlex">
						<text class="hsf14" style="color: red;" v-if="coupon_text">{{coupon_text}}</text>
						<text class="hsf12" v-else>暂无可用优惠券</text>
						<u-icon name="arrow-right" color="#999" size="14px"></u-icon>
					</view>
				</view> -->
				<!-- <view class="qrOrderli diFlex">
					<view>
						<text class="hsf14">活动优惠</text>
					</view>
					<view class="red diFlex">
						<text>-￥ {{orderData.discount_price}}</text>
						<u-icon name="arrow-right" color="#999" size="14px"></u-icon>
					</view>
				</view> -->
				<view class="qrOrderli diFlex qrOrderlinbot">
					<view></view>
					<view class="hsf14 bold" v-if="total_price">合计：￥ {{total_price}}</view>
					<view class="hsf14 bold" v-else>合计：￥ {{orderData.total_amount || ''}}</view>
				</view>
			</view>
			<!-- <view class="yuan diFlex" v-for="">
				<view class="diFlex">
					<image class="imgw2" src="https://img-cdn.duobashuzi.com/xianggui/img/wxpay.png" mode="widthFix"></image>
					<text class="hsf14 le5">微信支付</text>
				</view>
				<view>
					<image class="imgw" src="https://img-cdn.duobashuzi.com/xianggui/img/select-cart.png" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="yuan">
				<view v-for="option in paymentOptions" :key="option.type" class="zflist diFlex"
					@click="selectPayment(option.type)" >
					<view class="diFlex">
						<image class="imgw2" :src="option.icon" mode="widthFix"></image>
						<text class="hsf14 le5">{{ option.label }}</text>
					</view>
					<view>
						<image class="imgw"
							:src="payType === option.type ? option.selectedIcon : option.unselectedIcon"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="yuan diFlex">
				<view>
					<text class="hsf14">订单备注</text>
				</view>
				<view class="w80">
					<input type="text" :value="remarksValue" @change="onRemarks" placeholder="备注建议提前协商(250字以内)"
						dir="rtl" />

				</view>
			</view>
		</view>

		<view class="fg"></view>
		<view class="total-box">
			<view class="t_l">
				<view class="amount">应付:
					<text class="money bold" v-if="total_price">￥ {{total_price}}</text>
					<text class="money bold" v-else>￥ {{orderData.total_amount || ''}}</text>
				</view>

			</view>
			<view class="t_r">
				<view v-if="payType == 1" class="money_btn" @click="onPay">微信支付</view>
				<view v-else class="money_btn" @click="onPay">积分支付</view>
			</view>
		</view>
		<!-- 地址弹窗 -->
		<u-popup :show="showAddress" :round="20" mode="bottom" @close="closeAddress" closeable="true">
			<view class="h60 pore">
				<view class="tcTitle">选择收货地址</view>
				<view class="wxpore" @click="onweixindz">
					<view class="wxporeleft">
						<image class="imgw" style="margin-top: 2px;"
							src="https://img-cdn.duobashuzi.com/xianggui/img/weixin.png" mode="widthFix"></image>
						<text>获取微信收货地址</text>
					</view>
					<u-icon name="arrow-right" color="#999" size="14px"></u-icon>
				</view>
				<view class="li_items">
					<view class="li_item" v-for="item in list" :key="item.id">
						<view class="li_itemlxz" @click="setDefault(item.id)">
							<image v-if='item.isSelect == 1'
								src="https://img-cdn.duobashuzi.com/xianggui/img/select-cart.png" mode="widthFix">
							</image>
							<image v-else src="https://img-cdn.duobashuzi.com/xianggui/img/no-select.png"
								mode="widthFix">
							</image>
						</view>
						<view class="li_itemleft" @click="setDefault(item.id)">
							<view class="l_add">
								<text class="add">{{item.address+item.extra_field1}}</text>
							</view>
							<view class="l_top">
								<text v-if="item.is_default==1" class="moren">默认</text>
								<text class="name">{{item.recipient}}</text>
								<text class="tel">{{item.phone_number}}</text>
							</view>
						</view>
						<view class="li_itemright" @click="toEditAddr(item.id)">
							<image src="https://img-cdn.duobashuzi.com/xianggui/img/edit_icon.png"></image>
						</view>
					</view>
				</view>
				<view class="poreBot" @click="setAddress">
					<u-button :loading="load" text="新增地址" shape="circle" color="#ff4444"></u-button>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import serveAdd from "@/components/serves/serve.vue"
	import {
		couponDetail
	} from '@/api/my.js'
	import {
		addOrder,
		payOrder,
		addressDefault,
		payOrderList,
		weixinPay,
		payWhiteOrder,
		userCoupon,
	} from "@/api/addOrder.js"
	import {
		add,
		list,
		addEditAddress,
		detail,
	} from '@/api/address.js';
	import payAll from "@/utils/pay.js"
	export default {
		data() {
			return {
				list: [],
				showAddress: false,
				show: true,
				is_white: 1,
				navIndex: 0,
				memberLevel: '',
				isOrder: true,
				defaultAddr: true,
				user_note: "",
				orderGoods: '',
				// orderGoods:uni.getStorageSync("orderInfo").order_goods||[],
				address: {
					id: ''
				},
				load: false,
				order_type: 1,
				codeId: '',
				coupon_text: '',
				pay_code: 'weixin',
				cart_ids: '',
				remarksValue: "",
				orderData: {
					discount_price: 0
				},
				total_price: '', //选择优惠券的总价
				yh_price: '', //选择优惠券的优惠价
				payType: 1,
				paymentOptions: [{
						type: 1,
						label: '微信支付',
						icon: 'https://img-cdn.duobashuzi.com/xianggui/img/wxpay.png',
						selectedIcon: 'https://img-cdn.duobashuzi.com/xianggui/img/select-cart.png',
						unselectedIcon: 'https://img-cdn.duobashuzi.com/xianggui/img/wxz.png?2'
					},
					{
						type: 2,
						label: '余额支付',
						icon: 'https://img-cdn.duobashuzi.com/xianggui/img/jifenzf.png',
						selectedIcon: 'https://img-cdn.duobashuzi.com/xianggui/img/select-cart.png',
						unselectedIcon: 'https://img-cdn.duobashuzi.com/xianggui/img/wxz.png?3'
					}
				]
			}
		},
		onLoad(options) {
			console.log("触发")
			console.log(options)
			this.cart_ids = options.cart_ids;
			this.getpayOrderList();
			this.memberLevel = uni.getStorageSync('memberLevel');

			if (options.customer_name) {
				this.customer_name = options.customer_name
			}
			console.log('是否地址：' + options.address_id)
			if (options.address_id != undefined) {
				this.address_id = options.address_id;
				this.getDetail()
			} else {
				this.getAddress();
			}
			if (options.codeId) {
				//选择优惠券跳转进来的
				this.codeId = options.codeId;
				this.getCodeId()
			}
			console.log(this.customer_name)
		},


		components: {
			serveAdd
		},
		/* onLoad(options) {
			// this.$store.commit("setAddress",{
			// 	address:this.$store.state.orderInfo.shopUserAddress
			// })

			this.order_type = options.order_type
		},*/
		/* onShow() {
			this.getDefualtAddress()
		}, */
		methods: {
			selectPayment(e) {
				console.log(e)			  this.payType = e;			},			getCodeId() {

				couponDetail({
					coupon_code_id: this.codeId
				}).then(res => {
					console.log(res)
					this.coupon_text = '满' + res.data.cancel_price + '减' + res.data.coupon_price;

				})
			},
			getuserCoupon(price, id) {
				userCoupon({
					total_price: price,
					coupon_id: id
				}).then(res => {
					console.log(res)
					this.total_price = res.result.total_price;
					this.yh_price = res.result.yh_price;
				})
			},
			//跳转到优惠券页面
			onYhui() {
				// orderGoods
				// cart_product_id
				const goods_ids = this.orderGoods.reduce((prev, curr) => {
					prev.push(curr.mall_product_id)
					return prev
				}, []);
				console.log(goods_ids.join(","))
				let a = goods_ids.join(",");


				uni.navigateTo({
					url: "/package/datas/yhq?cart_ids=" + this.cart_ids + "&goods_ids=" + a
				})
			},
			//获取地址
			getList(id) {
				list({}).then(res => {
					this.list = res.data.map((v, i) => {
						if (v.id == id) {
							v.isSelect = 1
						} else {
							v.isSelect = 2
						}
						return v
					})
					console.log(this.list)
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			//点击跳转到编辑页面
			toEditAddr(id) {
				// let id = e.currentTarget.dataset.id
				console.log(id)
				uni.navigateTo({
					url: "/package/address/addrSet?id=" + id + "&cart_ids=" + this.cart_ids
				})
			},
			//新增地址
			setAddress() {
				uni.navigateTo({
					url: "/package/address/addrSet?cart_ids=" + this.cart_ids
				})
			},
			//获取微信授权地址
			onweixindz() {
				let that = this;
				uni.chooseAddress({
					success: function(res) {
						console.log('收货地址:', res);
						// 在这里处理返回的地址信息
						// res 包含如下字段：
						// userName, telNumber, provinceName, cityName, countyName, detailInfo, nationalCode, postalCode
						let data = {
							recipient: res.userName,
							phone_number: res.telNumber,
							province: res.provinceName,
							city: res.cityName,
							district: res.countyName,
							address: res.detailInfo,
							is_default: 1,
							extra_field1: res.detailInfo,
							extra_field2: '',
							extra_field3: ''
						}
						add(data).then(res => {

							if (res.code == 200) {
								that.address_id = res.data.id;
								that.getDetail();
								that.closeAddress();
							}
						})
					},
					fail: function(err) {
						console.error('获取收货地址失败:', err);
						if (err.errMsg.includes('auth deny')) {
							// 用户拒绝授权，可以根据情况引导用户去设置页面开启权限
							uni.showModal({
								title: '提示',
								content: '您已拒绝提供收货地址权限，是否前往设置开启？',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting();
									}
								}
							});
						}
					}
				});
			},
			onshowAddress(id) {
				this.showAddress = true;
				this.getList(id);
			},
			//选择地址
			setDefault(id) {
				this.address_id = id;
				this.list = this.list.map((v, i) => {
					if (v.id == id) {
						v.isSelect = 1
					} else {
						v.isSelect = 2
					}
					return v
				})
				this.getDetail();
				this.closeAddress()

			},
			//关闭地址弹窗
			closeAddress() {
				this.showAddress = false;
			},
			//监听备注的输入
			onRemarks(e) {
				console.log(e)
				this.remarksValue = e.detail.value;
			},
			getpayOrderList() {
				payOrderList({
					cart_ids: this.cart_ids
				}).then(res => {
					console.log(res)
					// this.$store.commit("setAddress", {
					// 	address: res.data
					// })
					this.orderGoods = res.result.cart_list;
					this.orderData = res.result;
					console.log(this.orderGoods)
					if (this.codeId) {
						this.getuserCoupon(this.orderData.total_amount, this.codeId)
					}
					// this.$store.commit("setAddress", {
					// 	address: res.result.user_address
					// })
				})
			},
			getDefualtAddress() {
				addressDefault({}).then(res => {
					this.address = res.data;
					this.$store.commit("setAddress", {
						address: res.data
					})
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},


			//点击下单
			async onPay() {


				let addressid = '';
				let _this = this;
				if (this.navIndex == 0) {

					if (!this.address || !this.address.id) {
						uni.showToast({
							title: "请选择地址",
							icon: "none"
						})
						return false
					}
					addressid = this.address.id;
				}
				let data = {
					cart_ids: this.cart_ids,
					address_id: addressid,
					pick_up_way: this.navIndex,
					customer_id: this.cusId,
					remark: this.remarksValue,
					coupon_id: this.codeId,
					pay_type:this.payType,
					
				}
				console.log(data)
				uni.requestSubscribeMessage({
					tmplIds: ["3lnB0WuuIb24wzWM9AQEwbLMvsRy3KzoLZiE2tFGxUw",
						"TSz3ADc-eHDrMPibT0UGayuARdu763D9y5NwJRoqc7g"
					], // 改成你的小程序订阅消息模板id
					success: () => {
						console.log(_this.data)
						addOrder(data).then(res => {
							console.log(res)
							if(res.result.pay_type == 1){
								//微信支付
								_this.getpayOrder(res.result.order_sn, res.result.order_id);
							}else if(res.result.pay_type == 2){
								uni.showModal({
									title: '温馨提示',
									content: '支付成功',
									cancelText: '返回首页',
									confirmText: '我的订单',
									success: function(res) {
										if (res.confirm) {
											uni.redirectTo({
												url: "/package/orderDetail/index?order_id=" +
													res.result.order_id
											})
											// order_id
										} else if (res.cancel) {
											uni.switchTab({
												url: '/pages/active/index'
											})
										}
									}
								});
							}
						
						}).catch(err => {
							uni.showToast({
								title: err.msg,
								icon: 'none'
							})
						})

					}
				});




			},
			//支付
			getpayOrder(order_sn, order_id) {
				payOrder({
					order_sn: order_sn
				}).then(res => {
					console.log(res)
					//this.getpayOrder(res.result)
					console.log(res.data.timeStamp)
					uni.requestPayment({
						"provider": "wxpay",
						"nonceStr": res.data.nonceStr, // 随机字符串
						"package": res.data.packageVal,
						"signType": res.data.signType, // 固定值
						"timeStamp": res.data.timeStamp, // 时间戳（单位：秒）
						"paySign": res.data.paySign, // 签名，这里用的 MD5/RSA 签名
						success(res) {
							console.log(res)
							uni.showModal({
								title: '温馨提示',
								content: '支付成功',
								cancelText: '返回首页',
								confirmText: '我的订单',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: "/package/orderDetail/index?order_id=" +
												order_id
										})
										// order_id
									} else if (res.cancel) {
										uni.switchTab({
											url: '/pages/active/index'
										})
									}
								}
							});
						},
						fail(e) {
							console.log(e)
							uni.showModal({
								title: '温馨提示',
								content: '支付失败',
								cancelText: '返回首页',
								confirmText: '我的订单',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: "/package/orderDetail/index?order_id=" +
												order_id
										})
										console.log('用户点击确定');
										// order_id
									} else if (res.cancel) {
										uni.switchTab({
											url: '/pages/active/index'
										})
									}
								}
							});
						}
					})
				})
			},
			async addOrderNum() {
				console.log(this.address)

				let data
				if (this.order_type == 1) {
					const cart_ids = this.orderGoods.reduce(function(prev, vur) {
						prev.push(vur.cart_id)
						return prev
					}, [])
					data = {
						openid: uni.getStorageSync("openid"),
						cart_ids: cart_ids,
						beizhu: this.user_note,
						shCode: uni.getStorageSync('shCode'),
						order_type: this.order_type
					}
				} else {
					data = {
						openid: uni.getStorageSync("openid"),
						goods_id: this.orderGoods[0].goods_id,
						goods_num: this.orderGoods[0].goods_num,
						beizhu: this.user_note,
						shCode: uni.getStorageSync('shCode'),
						order_type: this.order_type
					}
					console.log('zhifu', data)
				}

				this.load = true
				return new Promise((resolve, reject) => {
					addOrder(data).then(res => {

						resolve(res.data)
						// zfbPay(payData).then(res=>{

						// 	uni.navigateTo({
						// 		url:'/package/orderDetail/index?order_sn='+payData.order_sn
						// 	})
						// })

					}).catch(err => {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					})
				})

			},
			async weixinPay(order_sn) {
				const data = {
					order_sn,
					pay_code: this.pay_code,
					openid: uni.getStorageSync("openid"),
					shCode: uni.getStorageSync("shCode")
				}
				weixinPay(data).then(res => {
					console.log(res)
					payAll('wx', res.data).then(res => {
						uni.navigateTo({
							url: '/package/orderDetail/index?order_sn=' + data.order_sn
						})
					})

				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			// checkPayType(e) {
			// 	this.payType = e
			// },

			selectAddr() {
				uni.navigateTo({
					url: "/package/address/index?cart_ids=" + this.cart_ids
				})
			},
			//选择客户信息的跳转
			oncusInfo() {
				uni.navigateTo({
					url: "/package/cusinfo/cusinfo?cart_ids=" + this.cart_ids
				})
			},
			//获取默认地址
			getAddress() {
				console.log("触发地址")
				addEditAddress({}).then(res => {

					this.address = res.data;
					console.log(this.address)
					this.$store.commit("setAddress", {
						address: res.data
					})
				})
			},
			//获取地址详情
			getDetail() {
				let data = {
					address_id: this.address_id
				}
				detail(data).then(res => {
					console.log(res)
					this.address = res.data;
					this.$store.commit("setAddress", {
						address: res.data
					})

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f2f2f2;
		min-height: 100vh;
		// background-color: #f2f2f2;
	}
	.zflist:nth-child(1) {
		border-top:none;
		
	}
	.zflist{
		padding: 10px 5px;
		border-top: 1px solid #dcdcdc;
	}
	.li_items {
		height: 290px;
		overflow: scroll;
		width: 100%;
	}

	.li_item {
		width: 90%;
		padding: 10px 2.5%;
		border-radius: 5px;
		margin: 0 auto;
		margin-bottom: 12px;
		// padding: 15px 0 0;
		background: #fff;
		border-radius: 10px;
		display: flex;

		.li_itemlxz {
			width: 10%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				display: block;
				width: 20px;
				height: 20px;
			}
		}

		.li_itemleft {
			width: 80%;

			.l_top {
				color: #969799;
				font-size: 12px;

				.name {
					padding: 0 5px;
				}

				.moren {
					background: #ff4444;
					color: #fff;
					padding: 0 5px;
					border-radius: 10px;
				}
			}

			.l_add {
				display: flex;
				align-items: center;
				padding-bottom: 10px;

				.add {
					// max-width: 286px;
					display: inline-block;
					color: #323233;
					font-size: 14px;
					// @include ellipsis;
				}
			}
		}

		.li_itemright {
			width: 10%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 18px;
				height: 18px;
			}
		}


	}

	.pore {
		background: #f7f8fa;

		.tcTitle {
			height: 50px;
			background: #fff;
			line-height: 50px;
			font-size: 16px;
			color: #323233;
			border-radius: 20px 20px 0 0;
		}

		.wxpore {
			width: 85%;
			padding: 10px 2.5%;
			margin: 10px auto;
			background: #fff;
			border-radius: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.wxporeleft {
				display: flex;
				align-items: center;

				text {
					font-size: 14px;
					color: #323233;
					padding-left: 10px;
				}
			}
		}

		.poreBot {
			width: 90%;
			padding: 10px 5%;
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;
			box-shadow: 0 -5px 5px #e8e8e9;

		}
	}

	.hyleft {
		text-align: right;

		text {
			display: block;
		}
	}

	.hyRight {
		display: flex;
		align-items: center;
	}

	.imgw {
		width: 16px;
		height: 16px;
	}

	.imgw2 {
		width: 20px;
		height: 20px;
	}

	.w80 {
		width: 80%;
		text-align: right;
	}

	.hsf14 {
		color: #323233;
		font-size: 14px;
	}

	.hsf12 {
		color: #969799;
		font-size: 12px;
	}

	.yuan {
		padding: 15px 10px;
		background: #fff;
		border-radius: 10px;
		margin-top: 10px;
		font-size: 14px;
	}

	.qrOrder {
		padding: 15px 10px;
		// margin-top: 10px;
		background: #fff;
		border-radius: 10px;

		.qrOrderli {
			padding: 10px 0;
			line-height: 20px;
		}

		.qrOrderlinbot {
			border-top: 1px solid #f8f8f8;
		}
	}

	.money_btn {
		width: 200rpx;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		background-color: #ff4444;
		border-radius: 20px;
		margin: 0 12px;
	}

	.le5 {
		padding-left: 5px;
	}

	.yunfei {
		color: #323233;
		font-size: 14px;
		// padding: 5px 0;
		padding-top: 10px;
	}

	.con {
		background: #f2f2f2;
	}

	.bold {
		font-weight: 700;
	}

	.c3 {
		color: #333;
	}

	.a-center {
		align-items: center;
	}

	.j-end {
		justify-content: flex-end;
	}

	.col {
		flex-direction: column;
	}

	@mixin xcxs {
		display: inline-block;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: relative;
	}

	.fg {
		height: 60px;
		background: #f2f2f2;
	}

	.icon-tick {
		width: 12px;
		height: 8px;
		background-image: url("https://img-cdn.duobashuzi.com/xianggui/img/select.png");
	}

	.xcxs {
		display: inline-block;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: relative;
	}

	.total-box {
		background: #fff;
		padding: 5px 15px;
		border-top: 1px solid #f2f2f2;
		display: flex;
		align-items: center;
		background-color: #fff;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		z-index: 11;

		.t_l {
			flex: 1;
			font-size: 14px;
			color: #666;

			.fare {
				color: #999;
				font-size: 12px;
				padding: 10rpx 0 6rpx;
			}

			.amount {
				font-size: 18px;

				.money {
					color: #fe3b30;
					font-size: 16px;
				}
			}
		}

		.t_r {
			width: 35%;
		}

	}

	.body {
		width: 95%;
		margin: 0 auto;
		padding-top: 5px;

		.flex {
			display: flex;
			align-items: center;

		}

		.boxshadow {
			background-color: #f2f2f2;
			border-radius: 10px;
		}

		.d_box {
			padding: 15px 10px;
			margin-top: 10px;
			background: #fff;

			.l {
				flex: 1;
			}

			.title {
				padding-bottom: 15px;
				font-size: 16px;
			}

			.info {
				border-top: 0.5px solid #f4f4f4;
				font-size: 14px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.info_left {
					width: 90%;
				}

				.info_right {
					width: 10%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.i_top {
					margin-top: 10px;

					.it_l {
						flex: 1;

						.tel {
							margin-left: 17px;
						}
					}
				}

				.i_bottom {
					margin-top: 5px;
					font-size: 12px;

					.icon-dizhi {
						width: 15px;
						height: 16px;
						margin-right: 7px;
						background: url(https://img-cdn.duobashuzi.com/xianggui/img/address.png);
						@include xcxs;
					}

					.ib-r {
						flex: 1;
						font-size: 14px;
					}
				}

			}
		}

		.f_box {
			margin-top: 5px;

			.ul {
				padding-top: 5px;
			}

			.ul_row {
				padding-bottom: 15px;

				.li {
					display: flex;
					padding: 0 10px;
					background: #fff;
					margin-bottom: 10rpx;

					.l {
						width: 104px;
						color: #333;
						font-size: 14px;
						padding: 10px 0;
						font-weight: 700;
					}

					.r {
						flex: 1;
						text-align: right;
						font-size: 14px;

						.js_name {
							background: #feeff8;
							border-radius: 13px;
							padding: 1px 7px;
							color: #f25ab0;
						}

						.js_time {
							color: #e2ab09;
						}

						.icon-arrow-right {
							width: 7px;
							height: 13px;
							margin-left: 10px;
							top: 1px;
							background: url(https://img-cdn.duobashuzi.com/xianggui/img/arrow.png);
							@include xcxs
						}

					}
				}

				.col {
					.r {
						.textarea {
							box-sizing: border-box;
							padding: 10px;
							text-align: left;
							font-size: 14px;
							color: #333;
							height: 86px;
							flex: 1;
							width: 100%;
						}
					}
				}
			}
		}

		.z_box {
			margin-top: 10px;

			.title {
				font-size: 16px;
				font-weight: 700;
				color: #333;
				padding: 15px 10px;
			}

			.ul {
				padding-left: 10px;
				padding-bottom: 10px;

				.li {
					display: flex;
					align-items: center;
					border-top: 1px solid #ededed;

					.l {
						width: 150px;
						font-size: 14px;
						font-weight: 700;
					}

					.c {
						flex: 1;
						text-align: right;
					}

					.r {
						padding: 15px 10px;

						.radio {
							flex-shrink: 0;
							width: 20px;
							height: 20px;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							border: 1px solid #cfcfcf;
							border-radius: 50%;
							box-sizing: border-box;
							transition: background-color .5s;

							.xcxs {
								opacity: 0;
								transition: opacity .2s;
								top: 50%;
								left: 50%;
								-webkit-transform: translate(-50%, -30%);
								transform: translate(-50%, -30%);
							}

						}

						.radio.select {
							background: linear-gradient(90deg, #8d65e2, #4839ee);
							border-color: #4839ee;

							.xcxs {
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
</style>